<template>
  <div class="contect">
    <div class="tit">
      <h2>联系我们</h2>
      <div class="blue-box"></div>
      <p>一诺万金，倾尽全力，为您打造专属服务</p>
    </div>
    <div class="con">
      <h2>一诺万金（北京）科技有限公司</h2>
      <div class="box">
        <!-- message -->
        <div class="message-box">
          <!-- item -->
          <div
            class="message-item"
            v-for="item in message"
            :key="item.location"
          >
            <p>{{ item.location }}</p>
            <p>{{ item.service }}</p>
            <p>{{ item.postbox }}</p>
            <p>{{ item.linkman }}</p>
            <p>{{ item.phone }}</p>
          </div>
        </div>
        <!-- img -->
        <div class="img-box">
          <img src="../../../assets/img/common/ewm.png" alt="二维码">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Contect",
    data() {
      return {
        message: [
          {
            location: "营销中心：北京市丰台区南四环西路188号十六区19号楼9层",
            service: "客服热线：400-816-6279",
            postbox: "企业邮箱：beijing@1nuoyun.com",
            linkman: "联系人：朱先生",
            phone: "联系电话：400-816-6279"
          },
          {
            location: "研发中心：郑州市管城区城东路100号正商向阳广场B座4层",
            service: "客服热线：400-816-6279",
            postbox: "企业邮箱：zhengzhou@1nuoyun.com",
            linkman: "联系人：程先生",
            phone: "联系电话：400-816-6279"
          },
          {
            location: "上海办事处：上海市静安区恒丰路638号华森钻石商务广场6层",
            service: "客服热线：400-816-6279",
            postbox: "企业邮箱：shanghai@1nuoyun.com",
            linkman: "联系人：范先生",
            phone: "联系电话：400-816-6279"
          },
          {
            location: "广州办事处：广州市天河区汇彩路38号领汇创展中心6层",
            service: "客服热线：400-816-6279",
            postbox: "企业邮箱：guangzhou@1nuoyun.com",
            linkman: "联系人：周女士",
            phone: "联系电话：400-816-6279"
          },
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .contect {
    width: 62.5%;
    margin: 40px auto;
    // 标题
    .tit {
      text-align: center;
      margin-bottom: 24px;
      h2 {
        font-size: 36px;
        font-weight: 1000;
        color: #333;
      };
      .blue-box {
        width: 64px;
        height: 8px;
        background: linear-gradient(90deg, #2f6bee, #009fff);
        border-radius: 8px;
        margin: 8px auto;
      };
      p {
        font-size: 16px;
        color: #666;
      };
    };
    // 内容
    .con {
      box-shadow: 0 0 10px #f5f5f5;
      padding: 32px;
      h2 {
        font-size: 24px;
        font-weight: 1000;
        color: #333;
      };
      .box {
        display: flex;
        justify-content: space-between;
        .message-box {
          display: flex;
          flex-wrap: wrap;
          .message-item {
            width: 50%;
            margin-top: 32px;
            p {
              font-size: 16px;
              padding-top: 4px;
            };
          };
        };
        .img-box {
          img {
            width: 160px;
            margin-top: 32px;
          }
        }
      };
    };
    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-5px);
    }
  };
</style>